<template>
  <div class="statistics">
    <div class="production-bigbutton c-c5e14a">
      <div class="production-message">今日备款</div>
      <div class="production-number">{{ getProductionOrderSummaryList.provisionNum || 0 }}个</div>
    </div>
    <div class="production-bigbutton c-7adfd5">
      <div class="production-message">今日抵用</div>
      <div class="production-number">{{ getProductionOrderSummaryList.deductionNum || 0 }}个</div>
    </div>
    <div class="production-bigbutton c-e64949">
      <div class="production-message">今日报损</div>
      <div class="production-number">{{ getProductionOrderSummaryList.lossNum || 0 }}个</div>
    </div>
  </div>
</template>

<script>
import { getCakeStatistics } from '@/api/shop'
export default {
  data() {
    return {
        getProductionOrderSummaryList: []
    }
  },
  methods: {
    getData(params) {
      getCakeStatistics(params).then(res => {
        this.getProductionOrderSummaryList = res.data.data || [];
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.statistics {
  display: inline-flex;
  vertical-align: middle;
  margin-left: 20px;
  line-height: normal;
  .production-bigbutton {
    margin-right: 20px;
    color: #FFF;
    background-color: #409EFF;
    border-color: #409EFF;
    padding: 5px 16px;
    font-size: 14px;
    border-radius: 4px;
    text-align: center;
    font-weight: 500;
    display: inline-block;
    line-height: 1;
    white-space: nowrap;

    &.c-c5e14a {
      background-color: #c5e14a;
      border-color: #c5e14a;
    }

    &.c-7adfd5 {
      background-color: #7adfd5;
      border-color: #7adfd5;
    }

    &.c-e64949 {
      background-color: #e64949;
      border-color: #e64949;
    }

  }
}
</style>
